<template>
	<view>
		<view class="c1">
			<u-cell-group>
				<u-cell icon="integral-fill" :title="tittle" value="广州市"></u-cell>
			</u-cell-group>
		</view>
		<view class="component">
			<view><text class="t1">请输入缴费账户信息</text></view>
			<u-line class="t2"></u-line>
			<view class="component-content">
				<uni-row :gutter="30">
					<uni-col :span="6">
						<text>缴费单位</text>
					</uni-col>
					<uni-col :span="18">
						<zg-data-select v-model="selectValue1" @on-select="onChange5" :localdata="selectList">
						</zg-data-select>
					</uni-col>
				</uni-row>
				<!-- <u-line class="t2"></u-line> -->
				<uni-row :gutter="30" class="un1">
					<uni-col :span="6">
						<text>缴费户号</text>
					</uni-col>
					<uni-col :span="16">
						<u--input class="in1" v-model="number" placeholder="请输入缴费户号" border="surround" @change="change">
						</u--input>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<button @click="submit" class="button-login" hover-class="button-hover">下一步</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myuu: {},
				type: '',
				payee: '',
				number: '',
				value: '',
				tittle: "电费",
				selectValue1: '',
				selectValue2: '',
				selectList: [{
						value: '1',
						text: '广州电力公司',
						selected: false,
						disable: false,
					},
					{
						value: '2',
						text: '北京电力公司',
						selected: false,
						disable: false,
					},
					{
						value: '3',
						text: '南京电力公司',
						selected: false,
						disable: false,
					},
				]
			}
		},
		onLoad(val) {
			console.log(val)
			this.type = val.item
		},
		methods: {
			/**
			 * 选择之后
			 * @param {Object} e
			 * @param {Number} e.index 选项索引
			 * @param {Object} e.item 选项数据
			 * @param {String} e.item.value 选项值
			 * @param {String} e.item.text 选项文本
			 * @param {Boolean} e.item.selected 是否选中此选项
			 * @param {Boolean} e.item.disable 是否禁用此选项
			 */
			onChange5(e) {
				// console.log('选中项的数据', e);
				// console.log('选中值的值', e.item.text);
				this.payee = e.item.text;

			},
			change(e) {
				console.log('change', e);

			},
			submit() {
				uni.navigateTo({
					url: `./pay?item=${encodeURIComponent(JSON.stringify(this.payee))}+&name=${encodeURIComponent(JSON.stringify(this.type))}`,
				})
			}
		}
	}
</script>

<style scoped>
	.un1 {
		margin-top: 30rpx;
	}

	.in1 {
		height: 60rpx;
		width: 510rpx;
	}

	.t2 {
		margin-top: 30rpx;
	}

	.t1 {
		color: #66686e;
		font-size: 10rpx;
	}

	.c1 {
		color: #007AFF;
		background-color: #f0f6ff;
	}

	.component {
		margin: 60rpx 0;
		padding: 0 30rpx;
	}

	.component-title {
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.component-content {
		margin-top: 50rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
</style>
